<template>
  <!-- 这是商品的详情页面 点进来购买商品 -->
  <div class="flowerDetail">
    <el-card class="box-card">
      <div class="text">
        <div class="left">
          <img src="https://img3m2.ddimg.cn/15/1/25215612-1_h_6.jpg" alt="" />
        </div>
        <div class="right">
          <h1>愤怒的葡萄 诺奖得主约翰·斯坦贝克史诗巨著 胡仲持经典译本</h1>
          <div class="card">
            <div class="redcard">
              <div class="price">
                <div class="shoujia">
                  <p>
                    售价：<span><b>￥100.00</b></span>
                  </p>
                </div>
              </div>
              <div class="time">
                <div><p>配送时间：</p></div>
                <div class="peisong">全日配送</div>
              </div>
            </div>
            <div class="sign">
              <p>
                简介：<span class="common"
                  >对话是人类最基本的沟通方式之一。最理想的对话无拘无束的、真诚坦率放的--两个或两个以上的人分享思想和观点，从而弥合个体的经验，实现共同的目标。而最糟糕的对话会滋生误解和挫败感，掩盖真实意图。
有多少次你在结束对话时真正感受到自己被倾听？感受到对话实质性地取得了进步？这并非你独有的困惑。作为一名设计师，本书作者在实践中开始以全新视角看待对话。多年来，他一直在努力促成同事与客户之间的沟通，他坚信，一定有办法能以既精心设计又灵动巧妙的方式，重塑对话这门艺术。本书系统化呈现了他的发现，概述了成功交流的七大要素，即 承诺、创造性倾听、清晰、语境、限制、改变和创造。这些要素共同构成一套工具，任何人都可以使用它在对话中更从容、更高效地达成目标。</span
                >
              </p>
              <p>
                保障：<span class="common"
                >商城价为商品的销售价，具体的成交价可能因会员使用优惠券、银铃铛等发生变化，最终以订单结算页价格为准。
                  定价是图书封底定价。
                  划线价划线价为参考价，划线价格可能是图书封底定价或该商品曾经展示过的销售价等，由于地区、时间的差异化和市场行情波动，划线价可能会与您购物时展示的不一致，该价格仅供您参考。
                  折扣折扣指在图书定价基础上计算出的优惠比例或优惠金额。如有疑问，您可在购买前联系客服咨询。
                  异常问题如您发现活动商品销售价或促销信息有异常，请立即联系我们补正，以便您能顺利购物。
                </span>
              </p>
              <p>
                权益：<span class="common">{{ qy }}</span>
              </p>
              <p>
                配送说明：<span>{{ sm }}</span>
              </p>
            </div>
          </div>

          <div class="button">
            <el-button
              type="danger"
              icon="el-icon-shopping-cart-1"
              round
              size="medium"
              @click="add"
              >加入购物车</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-goods"
              round
              size="medium"
              @click="goBuy"
              >立即购买</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-star-off"
              round
              size="medium"
              @click="star"
              >收藏商品</el-button
            >
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      price: "",
      name: "",
      descs: "",
      img: "",
      bz: "保价服务·急速退款",
      qy: "先用后付，确认收货再付",
      sm: "全国(小城市请提前一天预定)",
      time: "",
      flower: {},
      userInfo: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
    };
  },
  watch: {},
  computed: {},
  methods: {
    goBack() {
      // console.log("go back");
      // 返回上一级
      this.$router.push("/flower");
    },
    // 加入购物车
    add() {
      this.request
        .post("/gwc", {
          name: this.name,
          descs: this.descs,
          price: this.price,
          uid: this.userInfo.id,
          url: this.img,
        })
        .then((res) => {
          console.log(res);
          if (res.data.code === "200") {
            this.$message.success("恭喜小主成功加入购物车！");
          }
        });
    },
    // 收藏
    star() {
      // this.request.post('/sc',this.$store.state.flower).then(res=>{
      //   console.log(res)
      //   if(res.data.code ==="200"){
      //     this.$message.success("恭喜小主成功收藏此刻挚爱！")
      //   }
      // })
      this.request
        .post("/sc", {
          name: this.name,
          descs: this.descs,
          price: this.price,
          uid: this.userInfo.data.id,
          url: this.img,
        })
        .then((res) => {
          if (res.data.code === "200") {
            this.$message.success("恭喜小主成功收藏此刻挚爱！");
          }
        });
    },
    // 立即购买

    goBuy() {
      console.log(this.userInfo);
      // 进入结算页面之前把选中的数据存到state里
      this.$store.state.select = [];
      console.log(this.$store.state.flower);
      const data = [
        {
          descs: this.$store.state.flower.fdesc,
          id: this.$store.state.flower.id,
          name: this.$store.state.flower.fname,
          price: this.$store.state.flower.sprice,
          uid: this.userInfo.data.id,
          url: this.$store.state.flower.img,
        },
      ];
      this.$store.state.select = data;
      console.log(this.$store.state.select);
      this.$router.push("/buy");
      console.log("www");
    },
  },
  created() {},
  mounted() {
    // 从flower带参过来
    // 第一种方法：$bus(有bug,第一次点不生效，需要在点进去flower触发)
    //  this.$bus.$on('h',(data)=>{
    //   console.log("手啊啊")
    //   // console.log(data)
    //   this.price = data.sprice
    //   this.name = data.fname
    //   this.descs = data.fdesc
    //   this.url = data.img
    //   console.log(data)
    //   console.log(data.fname)
    //   console.log(this.name)
    //  })

    // 第二种方法：$route传参
    // console.log(this.$route.query)
    //  this.price = this.$route.query.sprice
    // this.name = this.$route.query.fname
    // this.descs = this.$route.query.fdesc
    // this.img = this.$route.query.img

    // 第三种 vuex
    console.log(this.$store.state.flower);
    this.name = this.$store.state.flower.fname;
    this.price = this.$store.state.flower.sprice;
    this.descs = this.$store.state.flower.fdesc;
    this.img = this.$store.state.flower.img;
  },
};
</script>
<style lang="less" scoped>
.el-card {
  width: 90%;
  min-height: 600px;
  margin-top: 5%;
  margin-left: 8%;
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 50px;
    .left {
      width: 300px;
      height: 300px;
      img {
        width: 100%;
        height: 100%;
        // border: 1px solid #1b1b1b;
        // box-shadow: 5px 5px 5px 5px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      }
    }
  }
  .right {
    margin-left: 50px;
    width: calc(100% - 300px);
    h1 {
      margin-left: 15px;
      margin-bottom: 15px;
    }
    .card {
      .redcard {
        height: 80px;
        background-color: #ff5a49;
        border-radius: 15px 15px 0 0;
        color: #fff;
        font-size: 18px;
        padding: 30px;
      }
      .shoujia span {
        font-size: 22px;
        margin-left: 10px;
      }
      .time {
        display: flex;
        align-items: center;
        margin-top: 15px;
        color: #fff;
        .peisong {
          background: #ffddbf;
          width: 100px;
          margin-top: 5px;
          line-height: 30px;
          height: 30px;
          text-align: center;
          border-radius: 20px;
          color: #ff5a49;
        }
      }
      .block {
        padding: 8px 10px;
        color: #737373;
        font-size: 15px;
      }

      .sign {
        margin: 15px;
        p {
          font-size: 15px;
          color: #737373;
          padding: 5px 10px;
        }
        .common {
          margin-left: 10px;
        }
      }
      .button {
        margin-top: 40px;
      }
    }
  }
  .el-button + .el-button {
    margin-left: 0px;
    margin-right: 10px;
  }
  .el-button.is-round {
    float: right;
  }
}
</style>
